<template>
  <div>
      <div class="helllo">
          <div class="user-header">
              <input type="file"
                name="image"
                accept="image/*"
                @change="onchangeImgFun"
                class="header-upload-btn user-header-com"
              />
              <img :src="imgStr" class="user-header-img user-header-com" alt="">
          </div>
      </div>
      <van-icon name="cross" class="Yanxuan_Head"  @click="add" v-show="Isshow" ></van-icon>
  </div>
</template>

<script>
export default {
    data() {
    return {
      imgStr: require("../Header/BING.jpg"),
      errorStr: "",
      img: require("../Header/Shangchuan.png"),
      Isshow: true,
    };
  },
  methods: {
    onchangeImgFun(e) {
      var file = e.target.files[0];
      // console.log(file);
      // 获取图片的大小，做大小限制有用
      let imgSize = file.size;
      // console.log(imgSize);
      var _this = this; // this指向问题，所以在外面先定义
      // 比如上传头像限制5M大小，这里获取的大小单位是b
      if (imgSize <= 50 * 1024) {
        // 合格
        _this.errorStr = "";
        // console.log("大小合适");

        var reader = new FileReader();
        reader.readAsDataURL(file); // 读出 base64
        reader.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          var dataURL = reader.result;
          // console.log(dataURL);
          _this.imgStr = dataURL;
          // 下面逻辑处理
        };
      } else {
        // console.log("大小不合适");
        _this.errorStr = "图片大小超出范围";
      }
    },
    add() {
      if ((this.imgStr = [])) {
        this.imgStr = this.img;
        this.Isshow = false;
      }
    },
  },
};
</script>

<style>
.Yanxuan_Head {
  position: absolute;
  top: 1.6rem;
  left: 5.5rem;
  font-size: 1rem;
}
.user-header {
  position: relative;
  display: inline-block;
}
.user-header-com {
  margin-top: 1.6rem;
  width: 5rem;
  height: 5rem;
  display: inline-block;
  border-radius: 3rem;
  margin-left: 0.6rem;
}
.header-upload-btn {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
}
.tip {
  font-size: 14px;
  color: #666;
}
/* error是用于错误提示 */
.error {
  font-size: 12px;
  color: tomato;
  margin-left: 10px;
}
</style>